<template>
	<div class="all-plist">
		<!-- 搜索框 -->
		<el-card class="box-card border search-card" shadow="never">
			<i class="iconfont icon-sousuo-copy"></i>
			<span>筛选搜索</span>
			<el-button style="float: right;margin-top:-5px;margin-left:15px;" size="mini" @click="getPlist" type="primary">查询结果</el-button>
			<el-button style="float: right;margin-top:-5px;" size="mini">重置</el-button>
			<div class="search-box">
				<el-row>
					<el-col :span="8">
						输入搜索：
						<el-input placeholder="商品名称" v-model="listQuery.keyword" type="text" />
					</el-col>
					<el-col :span="8">
						商品货号：
						<el-input placeholder="商品货号" v-model="listQuery.productSn" />
					</el-col>
					<el-col :span="8">
						商品分类：
						<el-cascader :clearable="true" :props="{label:'name',value:'id'}" v-model="listQuery.productCategoryId" :options="cateList"
						 placeholder="商品名称" @change="handleChange"></el-cascader>
					</el-col>
				</el-row>
				<el-row style="margin-top:20px;">
					<el-col :span="8">
						商品品牌：
						<el-cascader :clearable="true" :props="{label:'name',value:'id'}" v-model="listQuery.brandId" :options="catList"
						 placeholder="商品品牌" @change="handleBrandChange"></el-cascader>
					</el-col>
					<el-col :span="8">
						上架状态：
						<el-cascader v-model="listQuery.publishStatus" placeholder="上架状态" :options='[{label:"上架",value:1},{label:"下架",value:0}]'
						 @change="handlerPublishChange" />
					</el-col>
					<el-col :span="8">
						审核状态：
						<el-cascader v-model="listQuery.verifyStatus" placeholder="审核状态" @change="handlerRecomendChange" :options='[{label:"已审核",value:1},{label:"未审核",value:0}]' />
					</el-col>
				</el-row>
			</div>
		</el-card>

		<!-- 数据列表 -->
		<el-card class="box-card border" shadow="never" style="margin-top:15px;">
			<i class="iconfont icon-wj-wj-2"></i>
			<span>数据列表</span>
			<el-button style="float: right;margin-top:-5px;" size="small">操作按钮</el-button>
		</el-card>

		<!-- 数据列表展示 -->
		<el-table :data="plist" border style="width: 100%;margin-top:15px;">
			<el-table-column prop="id" align="center" label="编号" width="60">
			</el-table-column>
			<el-table-column align="center" prop="pic" label="商品图片" width="100">
				<!-- el-table-colum里面有插槽 -->
				<template slot-scope="s">
					<img :src="s.row.pic" style="width:60px;height:60px;" />
				</template>
			</el-table-column>
			<el-table-column align="center" prop="name" label="商品名称">
			</el-table-column>
			<el-table-column align="center" prop="productSn" label="价格/货号">
				<template slot-scope="s">
					<p>价格：{{s.row.price}}</p>
					<p>货号：{{s.row.productSn}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="publishStatus" label="标签">
				<template slot-scope="s">
					<!-- 
					  `publishStatus` '上架状态：0->下架；1->上架',
					  `newStatus`(新品状态:0->不是新品；1->新品',
					  `recommandStatus '推荐状态；0->不推荐；1->推荐'
				   -->
					<p>上架：
						<el-switch v-model="s.row.publishStatus" @change="handlePublish(s.row.id,s.row.publishStatus)" :active-value="1"
						 :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</p>
					<p>新品：
						<el-switch :active-value="1" :inactive-value="0" v-model="s.row.newStatus" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</p>
					<p>推荐：
						<el-switch :active-value="1" :inactive-value="0" v-model="s.row.recommandStatus" active-color="#13ce66"
						 inactive-color="#ff4949">
						</el-switch>
					</p>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="sort" width="100" label="排序">
			</el-table-column>
			<el-table-column align="center" width="100" prop="stock" label="SKU库存">
				<template v-slot="s">
					<el-button type="primary" icon="el-icon-edit" circle @click="editSkuStock(s.row)"></el-button>
				</template>
			</el-table-column>
			<el-table-column align="center" width="100" prop="sale" label="销量">
			</el-table-column>
			<el-table-column align="center" prop="verifyStatus" label="审核状态">
				<template v-slot="s">
					{{s.row.verifyStatus | verifyFiter}}
					<p>
						<el-button type="text">审核详情</el-button>
					</p>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="id" width="180" label="操作">
				<template v-slot="s">
					<p>
						<el-button size='small'>日志</el-button>
						<el-button size='small' @click="handEdit(s.row.id)">编辑</el-button>
					</p>
					<p>
						<el-button size='small'>查看</el-button>
						<el-button size='small' type="danger" @click="handDelete(s.row.id)">删除</el-button>
					</p>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div style="margin-top:15px">
			<el-select v-model="value" placeholder="批量操作">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>

			<el-button type="primary" style="margin-left:20px">确定</el-button>

			<div class="block" style="float:right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[3, 5, 8, 10]"
				 :page-size="3" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<!-- 点击编辑sku弹出框 -->
		<el-dialog title="编辑货品信息" class="editSkuDialog" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="skuDialogVisible"
		 width="60%">
			<template>
				<div style="">
					<el-row :gutter="10">
						<el-col :span="8" style="line-height: 40px;">
							商品货号：{{editRow.productSn}}
						</el-col>
						<el-col :span="16">
							<el-input placeholder="按sku编号搜索" v-model="listQuery.productSn" class="input-with-select">
								<el-button slot="append" icon="el-icon-search"></el-button>
							</el-input>
						</el-col>

					</el-row>
					<el-table style="margin-top:15px;" :data="guigeList">
						<el-table-column prop="id" label="sku编号">
							<template v-slot="s">
								<el-input
									v-model="s.row.id"
								/>
							</template>
						</el-table-column>
						<template v-for="(item,index) in guigeType">
							<el-table-column :key="index" :label="item.name">
								<template v-slot="s">
									<el-input v-model="s.row.spData[index].value" />
								</template>
							</el-table-column>
						</template>
						<el-table-column prop="price" label="销售价格">
							<template v-slot="s">
								<el-input
									v-model="s.row.price"
								/>
							</template>
						</el-table-column>
						<el-table-column prop="stock" label="商品库存" width="180">
							<template v-slot="s">
								<el-input v-model="s.row.stock" />
							</template>
						</el-table-column>
						<el-table-column prop="lockStock" label="库存预警值" width="180">
							<template v-slot="s">
								<el-input
									v-model="s.row.lockStock"
								/>
							</template>
						</el-table-column>
					</el-table>

				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="skuDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleSaveSkuInfo()">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import {getProductByQuery,productPusblish,productEdit,getProductSkuListByPid,batchEditSkuWithPid,productDelete} from '@/api/product.js'
	import {getAttrInfoByAttrId} from '@/api/protype.js'
	import {Message,Confirm} from 'element-ui'
	import productMixin from "@/views/product/productMixin.js"
	//拦截器，配置axios
	export default {
		data() {
			return {

				plist: [],
				listQuery: {
					pageNum: 1,
					pageSize: 3,
					keyword: null,
					publishStatus: null,
					verifyStatus: null,
					productSn: null,
					productCategoryId: null,
					brandId: null
				},
				skuDialogVisible: false,
				value: '',
				total: 0,
				options: [{label: "商品上架",value: "publishStatusUp"},{label: "商品下架",value: "publishStatusDown"},{
						label: "设为推荐",
						value: "recommandStatusUp"
					},
					{
						label: "取消推荐",
						value: "recommandStatusDown"
					},
					{
						label: "设为新品",
						value: "newStatusUp"
					},
					{
						label: "取消新品",
						value: "newStatusDown"
					},
					{
						label: "转移到分类",
						value: "moveCate"
					},
					{
						label: "移入回收站",
						value: "moveGbg"
					}
				],
				editRow: {}, //编辑的哪一行商品数据

				guigeList: [], //商品规格数据列表
				guigeType: [] //规格分类数据
			}
		},
		mixins:[productMixin],
		filters: {
			verifyFiter(v) {
				return v == 1 ? "已审核" : "未审核";
			}
		},
		mounted() {
			//获取商品数据
			this.getPlist();
			// //获取分类二级菜单
			// this.getCateList();
			
		},
		methods: {
			//绑定编辑事件
			handEdit(id){
				//跳转到商品的编辑页面(但是我们去到那个页面的时候，页面要显示数据呢)
				// 发送请求拿数据
				productEdit(id)
				.then(resp=>{
					this.$store.commit("changeProductAddData",resp.data.data);
				})
				
				this.$router.push("/product/product/add")
				
				
				
			},
			//绑定删除事件
			handDelete(id){
				
				//弹窗提示
				  this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							//点击了确认了
							productDelete({
								ids:id,
								deleteStatus:1  //1表示删除，0表示未删除
							}).then(resp=>{
								if(resp.data.code==200){
									this.$message({
										type: 'success',
										message: '删除成功!'
									});
									
									// //跳转到展示页面
									// this.$router.push("/product/product/list");
									//重新加载一次数据
									this.getPlist();
								}
							})
						}).catch(() => {
						  this.$message({
							type: 'info',
							message: '已取消删除'
						  });          
						});
				//调用删除api
				/* productDelete({
					ids:id,
					deleteStatus:1  //1表示删除，0表示未删除
				}).then(resp=>{
					if(resp.data==200){
						
					}
				}) */
			},
			//分类切换事件
			handleChange(value) {
				console.log(value);
				this.listQuery.productCategoryId = value[1];
			},
			handleBrandChange(value) {
				this.listQuery.brandId = value[0];
			},
			handlerPublishChange(value) {
				this.listQuery.publishStatus = value[0];
			},
			handlerRecomendChange(value) {
				this.listQuery.verifyStatus = value[0]
			},

			getPlist() {
				getProductByQuery(this.listQuery)
					.then(resp => {
						console.log(resp.data)
						this.plist = resp.data.data.list;
						this.total = resp.data.data.total;
					})
			},
			
			handlePublish(ids, publishStatus) {
				//发请求，改数据
				// http://10.10.10.114:8080/product/update/publishStatus?ids=28&publishStatus=0
				productPusblish({
						ids: ids,
						publishStatus: publishStatus
					})
					.then(data => {
						// alert("ok")
					})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				//页大小发生改变，重新发送请求拿数据
				this.listQuery.pageSize = val;
				this.getPlist();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				//重新发送请求获取数据
				this.listQuery.pageNum = val;
				this.getPlist();
			},
			//点击编辑库存按钮触发事件
			editSkuStock(row) {
				this.skuDialogVisible = true
				//保存
				this.editRow = row;


				getProductSkuListByPid(row.id)
					.then(resp => {
						this.guigeList = resp.data.data;
						console.log(this.guigeList, "sdfdsf");
						this.guigeList.forEach((g)=>{
							g.spData=JSON.parse(g.spData);
						})
					})

				getAttrInfoByAttrId(row.productAttributeCategoryId)
					.then(resp => {
						this.guigeType = resp.data.data.list;
						// console.log(this.guigeType,"规格type");
					})
				// this.guigeType=
			},
			//保存sku信息
			handleSaveSkuInfo(){
				this.skuDialogVisible = false
				console.log(this.guigeList,"guigelist")
				//将guige转成字符串重新
				this.guigeList.forEach(data=>{
					data.spData = JSON.stringify(data.spData);
				})
				//发送请求--
				console.log("保存的数据:",this.guigeList)
				batchEditSkuWithPid(this.editRow.id,this.guigeList)
				.then(resp=>{
					if(resp.data.code==200){
						Message({
							message:'sku信息保存成功',
							type:"success"
						})
					}
				})
			}
			// /me
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.all-plist {
		padding: 15px;

		.search-card {
			padding-bottom: 20px;
		}

		.search-box {
			padding-left: 50px;
			margin-top: 15px;

			.el-row {
				height: 30px;
				line-height: 40px;
			}

			.el-input {
				width: 200px;
				height: 30px !important;
			}

			.el-cascader {
				width: 200px;
			}
		}

		.iconfont {
			padding-right: 5px;
		}
		.editSkuDialog{
			.el-table{
				.el-input__inner{
					text-align: center !important;
				}
			}
		}
	}
</style>
